<template>
  <div>
    <!-- 搜索栏 -->
    <Row style="margin-top:20px">
      <Card>
        <div style="margin-top: 6px">
          <Form ref="searchData" :model="searchData" :label-width="80">
            <Row>
               <i-col :xs="24" :md="12" :lg="6">
                <FormItem label="单位名称">
                    <Select
                  filterable
                  placeholder="请输入用户单位"
                  v-model="searchData.deptCode"
                >
                  <Option
                    v-for="item in getDepartmentList"
                    :value="item.departcode"
                    :key="item.departcode"
                  >{{ item.department }}</Option>
                </Select>
                </FormItem>
              </i-col>
                <i-col :xs="24" :md="12" :lg="6">
                <FormItem label="年月">
                  <DatePicker
                        type="month"
                       format="yyyyMM"
                      v-model="searchData.datetime"
                       @on-change="handlerFormat"
                      placeholder="请选择年月"
                     style="width: auto"
                    ></DatePicker>
                </FormItem>
              </i-col>
            </Row>
            <FormItem>
              <Button type="primary" v-if="btnAccess.query"  @click="searchSubmit(10,1)">提交搜索</Button>
              <Button@click="seachReset('searchData')" style="margin-left: 8px">重置搜索</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </Row>
    <Row style="margin-top:20px">
      <Card>
        <div class="btn-arrs">
             <Button type="primary" size="large" @click="exportData"><Icon type="ios-download-outline"></Icon>导出年度绩效考核</Button>
        </div>
        <Table height="500"  border :loading="tabelLoading" ref="selection" :columns="tableHead" :data="tableData"></Table>
        <div style="margin-top:20px;margin-left:35%">
          <template>
            <Page
             @on-change="pageNumberChange"
             @on-page-size-change="pageSizeChange"
             :page-size="pageSize"
             :total="pageTotal"
             show-elevator
             show-sizer/>
          </template>
        </div>
      </Card>
    </Row>
  </div>
</template>

<script>
import { hasOneOf } from "@/libs/tools";
import { aunuScoreAjax } from "@/api/importantAnnua";
// 查询URL
const QUERY_URL = "/departScore/query";

export default {
  data() {
    return {
      // 增删改查权限按钮
      btnAccess: {
        add: true,
        add2: "inline-block",
        del: "inline-block",
        upd: true,
        query: true
      },
      tabelLoading: false, // 表格loading
      searchData: {
        // 搜索数据
        dateTime: "", // 年月
        deptCode: ""// 单位名称
      },
      pageTotal: 10, // 总页数
      pageSize: 10, // 每页条数
      pageNumber: 1, // 默认第一页
      tableHead: [], // 表头说话
      tableData: []// 表格数据
    };
  },
  methods: {
    // seach指标时间查询
    handlerFormat(date) {
      this.searchData.datetime = date;
    },
    // 搜索
    searchSubmit(pageSize, pageNumber) {
      this._getUserData(this.searchData, QUERY_URL, pageSize, pageNumber);
    },
    // 重置搜索
    seachReset(name) {
      this.searchData = {
        datetime: "", // 年月
        deptCode: ""// 部门单位
      };
    },
    // 查询
    _getUserData(formData, url, pageSize, pageNumber) {
      this.tabelLoading = true;
      formData = Object.assign(formData, {
        pageSize,
        pageNumber
      });
      const keyOne = "filter";// 注意：keyOne需要和后端接收的参数名一样
      aunuScoreAjax({ formData, url, keyOne })
        .then(result => {
          this.tabelLoading = false;
          if (result.data.code === "200") {
            this.tabelLoading = false;
            this.tableHead = result.data.results.tableHead;
            this.tableData = result.data.results.tableData;
            this.pageTotal = result.data.results.pageTotal;

            let headArr = this.tableHead;
            // 给表头赋值宽度
            for (let i = 0; i < headArr.length; i++) {
              if (i === 0) {
                headArr[i].fixed = "left";
              }
              headArr[i].width = 200;
            }
            this.$Message.success("查询成功");
          } else {
            this.$Message.error("查询失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 页码
    pageNumberChange(pageNumber) {
      this.pageNumber = pageNumber;
      this._getUserData(
        this.searchData,
        QUERY_URL,
        this.pageSize,
        this.pageNumber
      );
    },
    // 页数
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getUserData(
        this.searchData,
        QUERY_URL,
        this.pageSize,
        this.pageNumber
      );
    },
    // 导出年度绩效考核
    exportData() {
      this.$refs.selection.exportCsv({
        filename: '年度绩效考核'
      });
    }
  },
  created() {
    this._getUserData(
      this.searchData,
      QUERY_URL,
      this.pageSize,
      this.pageNumber
    );
    // 获取按钮权限
    let btnAccess = sessionStorage.getItem("btnaccess");
    this.globalFunction(btnAccess);
  },
  computed: {
    getDepartmentList() {
      return this.$store.state.user.departmentList;
    },
    getDepartment() {
      return this.$store.state.user.department;
    },
    access() {
      return this.$store.state.user.access;
    }
  }
};

</script>

<style scoped>
thead th{
  height: 30px !important;
}
</style>
